<template>
	<view class="navbar">
		<view class="fixed-content">
      <!-- 状态栏高度 -->
			<view :style="{'height': geStatusBarHeight() + 'px'}"></view>
      <!-- 导航栏高度 -->
			<view class="bar-content" :style="{'height': getNavBarHeight()+'px'}">
				<slot></slot>
        <view class="nav-title">{{ title }}</view>
			</view>
		</view>
		<!-- 占位高度，状态栏高度+导航栏高度，父组件就不需要计算导航栏高度 -->
		<view :style="{'height': geStatusBarHeight() + getNavBarHeight() + 'px'}"></view>
	</view>
</template>

<script>
export default {
  name: "Navbar",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  onShow () {

  },
  methods: {
    // 获取状态栏高度
    geStatusBarHeight() {
      return uni.getSystemInfoSync()["statusBarHeight"];
    },
    // 获取导航栏高度
    getNavBarHeight() {
      let navbarHeight
      // #ifdef MP-WEIXIN
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      // 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）
      navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()["statusBarHeight"]) * 2 + 2
      // #endif
      // #ifdef APP-PLUS || H5
      navbarHeight = 44
      // #endif
      return navbarHeight
    },
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar{
  .fixed-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1996;
    background: #fff;
    .bar-content{
      display: flex;
      align-items: center;
      position: relative;
      .nav-left{
        width: 22px;
        height:22px;
        position: absolute;
        z-index: 2;
        top: 50%;
        transform: translateY(-50%);
      }
      .nav-title{
        color: #000;
        font-size: 14px;
        width: 100%;
        // position: absolute;
        // top: 50%;
        // transform: translateY(-50%);
        text-align: center;
      }
    }
  }
}
</style>
